import React, { useState, useEffect, version } from 'react'
import { json, useNavigate } from 'react-router-dom';
import { UserOutlined, TabletOutlined, TagsOutlined } from '@ant-design/icons';
import { Input, Space, Radio, Button, Flex, ConfigProvider } from 'antd';
import './logincss/Login.css'
import { login, captcha } from '../../request/api'

export default function XXK_Login() {
    const navigate = useNavigate()

    const [user, setUser] = useState('')
    const [password, setPassword] = useState('')
    const [psd, setPsd] = useState(false)
    const [text, setText] = useState('')
    const [Verification, setVerification] = useState('')
    const [VerificationText, setVerificationText] = useState('')

    useEffect(() => {
        go_Verification()
    }, [])


    //登录按钮点击事件
    const go_home = async () => {
        if (!user || !password) {
            alert('请输入账号密码')
            return
        }
        if (!text) {
            alert('请输入验证码')
            return
        }
        if (VerificationText != text) {
            alert('验证码错误')
            return
        }
        let res: any = await login({ user, password })
        if (res.code == 200) {            
            localStorage.setItem('access_token', res.data.access_token);
            localStorage.setItem('refresh_token', res.data.refresh_token);
            localStorage.setItem('user', res.data.user);
            navigate('/home')
        } else {
            alert('登录失败,密码或账号错误')
        }
    }


    // 获取验证码
    const go_Verification = async () => {
        let res: any = await captcha({})
        if (res.code == 200) {
            setVerificationText(res.text)
            setVerification(res.data)
        } else {
            alert('验证码获取失败')
        }
    }


    return (
        <div className='login_all'>
            <div className='login'>
                <div className='login_title'>
                    <p style={{
                        fontSize: '22px',
                        color: '#333333',
                        marginBottom: '10px'
                    }
                    }>Axlab社区团购</p>
                    <p style={{
                        fontSize: '13px',
                        color: '#999999',
                        marginBottom: '30px'
                    }}>系统管理账号登录</p>
                </div>
                {text}
                <div className='input'>
                    <div>
                        <Input style={{ height: '0.83rem' }} placeholder="用户名" prefix={<UserOutlined style={{ color: "#ccc" }} />}
                            value={user} onChange={(e) => {
                                setUser(e.target.value)
                            }} />
                    </div>
                    <div>
                        <Input style={{ height: '0.83rem' }} placeholder="密码" prefix={<TabletOutlined style={{ color: "#ccc" }} />}
                            value={password} onChange={(e) => {
                                setPassword(e.target.value)
                            }} /></div>
                    <div style={{ marginTop: "-0.5rem" }}>
                        <Space direction="horizontal">
                            <Input placeholder="验证码" prefix={< TagsOutlined style={{ color: "#ccc" }} />}
                                value={text} onChange={(e) => {
                                    setText(e.target.value)
                                }}
                                style={{ width: "4.7rem", height: '0.83rem' }} />
                            <div style={{
                                paddingBottom: "0.27rem",
                                boxSizing: "border-box",
                            }}>
                                <div dangerouslySetInnerHTML={{ __html: Verification }} className='Verification'
                                    onClick={() => go_Verification()}></div>
                            </div>

                        </Space>
                    </div>
                    <div className='btn'>
                        <div className='btn_remember'>
                            <ConfigProvider wave={{ disabled: true }}>
                                <Radio style={{
                                    width: "2rem",
                                    color: "rgb(193, 183, 153)",
                                }}
                                    value={psd} checked={psd}
                                    onClick={() => {
                                        setPsd(!psd);
                                    }}>
                                    <span>记住密码</span>
                                </Radio>

                                <Button color="default" variant="link" >
                                    <span onClick={()=>{
                                        navigate('/Face')
                                    }}>人脸验证登录</span>
                                </Button>
                            </ConfigProvider>
                        </div>
                        <ConfigProvider>
                            <Flex gap="middle" wrap>

                                <Button color="danger" variant="solid" block
                                    onClick={() => {
                                        go_home()
                                    }}>
                                    立即登录
                                </Button>

                            </Flex>
                        </ConfigProvider>
                    </div>
                </div>
            </div>
        </div>
    )
}
